<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        button ,input { 
            padding: 20px;
            outline: auto;
        }
        .map{
            position: relative;
            width: 800px;
            height: 600px;
            background: url(./img/bgc.png);
            border:10px solid blue;
            margin :20px auto;

        }
        .map .food{
            width: 20px;
            height: 20px;
            background-image: url(./img/food.png);
            position: absolute;
            left: 100px;
            top: 100px;
        }
        .map .head{
            width: 20px;
            height: 20px;
            background-image: url(./img/head.png);
            position: absolute;
            /* left: 100px;
            top: 0px; */

        }
        .map .body{
            width: 20px;
            height: 20px;
            background-image: url(./img/body.png);
            position: absolute;
            /* left: 80px;
            top: 0px; */
        }
    </style>
</head>
<body>
    <button class="start">开始</button>
    <button class="stop">停止</button>
    <button class="restart">重新开始</button>
    <input type="text " value="0" class="score">
    <div class="map">
        <!-- <div class="food"></div>
        <div class="head"></div>
        <div class="body"></div>
        <div class="body"></div> -->
    </div>
    <script src="./food.js"></script>
    <script src="./snake.js"></script>
    <script src="./game.js"></script>
    <script>
        
        /*
            贪吃蛇

        1.分析需求
            +我们把贪吃蛇拆分成四个模块
            1-1 食物模块 生成一个食物随机一个位置
            1-2 蛇模块 生成一个蛇，给蛇加一节，移动，判断吃到食物，死亡
            1-3 游戏规则 跑的速度 游戏积分 游戏怎么开始怎么结束
            1-4 整合 点击什么开始 点击什么结束
        2.书写食物模块
            创建一个标签 类名food
            计算一个位置
            插入到地图中去
        3.书写蛇模块
            准备一个数组 存储蛇[head body body]
            准备变量 存储方向
            准备方法 计算下一个头方向
                    给蛇加一节
        4.规则
        
        */

    </script>
    <script src="./main.js" type="module"></script>
</body>
</html>